<!--css在login.less-->
<template>
	<section id="register">
		<section class="step1" v-show="step == 1">
			<header>
				<router-link to="/login">
					<h2>登录</h2></router-link>
			</header>
			<section class="registerWarp">
				<section class="title">
					<h2>手机注册</h2>
				</section>
			</section>
			<section class="formWarp">
				<van-cell-group>
					<h3>中国</h3>
					<span class="num86">+86</span>
					<van-field v-model="userData.mobile" placeholder="请输入手机号" icon="close" @click-icon="userData.mobile='' " type='number' />
				</van-cell-group>
			</section>
			<section class="btnWarp" @click="registerNext">
				<section class="btn">
					注册
				</section>
			</section>
		</section>

		<section class="step2" v-show="step == 2">
			<section class="return" @click="returnSetp1">
				<i class="van-icon van-icon-arrow-left"></i>
			</section>
			<section class="title">
				<h2>短信验证码</h2>
				<span class="alse">验证码已发出</span>
			</section>
			<section class="codeWarp">
				<input type="text" class="enter" maxlength="6" v-model="userData.code" />
				<section class="warpLine">
					<section class="line">
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
						<span></span>
					</section>
					<input type="button" :value="btnCode.val" class="prompt" :disabled="btnCode.disabled" @click="getCodeAgain" />
				</section>
				<section class="btnWarp" @click="registerNext2">
					<section class="btn">
						下一步
					</section>
				</section>
			</section>
		</section>

		<section class="step3" v-show="step == 3">
			<section class="return" @click="returnSetp1">
				<i class="van-icon van-icon-arrow-left"></i>
			</section>
			<section class="title">
				<h2>设置密码</h2>
				<span class="alse">8-20个字符,不可以是纯数字或纯字母</span>
			</section>
			<van-cell-group>
				<van-field v-model="userData.pwd" placeholder="请输入密码" :type='isShow.type' :icon="isShow.icon" @click-icon='switchs(1)' />
				<van-field v-model="userData.opwd" placeholder="请再次输入密码" :type='isShow.otype' :icon="isShow.oicon" @click-icon='switchs(2)' />
				<van-field v-model="userData.tjuser" placeholder="邀请码(选填)机构请填写800350" />
			</van-cell-group>

			<section class="agree">
				<van-checkbox v-model="checked" shape='square'><span> 我同意  </span></van-checkbox>
				<span class="xieyi" @click="show='true'"> « 用户协议 » </span>
			</section>
			<section class="btnWarp" @click="submit">
				<section class="btn">
					注册
				</section>
			</section>
			<van-popup v-model="show" position="right" :overlay="false">
				<section class="return" @click="show=false">
					<i class="van-icon van-icon-arrow-left"></i>
				</section>
				<section class="contWarp">
					这里是内容是大法官is发via发给撒发布是死啊法国赛反思啊发高烧分别是广佛撒发给
				</section>
			</van-popup>
		</section>

	</section>
</template>

<script>
	export default {
		data() {
			return {
				checked: '', //控制是否点击我同意标志位
				show: false, //弹框显示隐藏标志位
				step: 1, //执行到哪一步标志位				
				//密码显隐控制位
				isShow: {
					icon: 'password-not-view',
					type: 'password',
					oicon: 'password-not-view',
					otype: 'password'
				},
				//定时器所需要的数据
				btnCode: {
					time: 59,
					disabled: true, //控制点击和不可点击
					val: ''
				},
				//用户信息（要传给后台的数据可根据业务需要自定义字段）
				userData: {
					mobile: '', //用户的手机号
					opwd: '', //密码
					pwd: '', //
					code: '', //验证码
					tjuser: '' //推荐号
				}
			}
		},
		methods: {
			//点击密码显隐控制函数
			switchs(index) {
				this.$public.switchs(index, this);
			},
			//点击返回执行函数

			returnSetp1() {
				var _this = this;
				_this.userData = {
					mobile: '', //用户的手机号
					opwd: '', //密码
					pwd: '', //
					code: '', //验证码
					tjuser: '' //推荐号
				}
				_this.step = 1;
			},
			// 点击注册实行下一步函数 
			registerNext() {
				/*
				 todo 
				 1，判断手机号是否正确
				 2, 验证手机号有没有被注册
				 3，切换step状态
				 * */
				var _this = this;
				if(!_this.$public.checkMobile(_this.userData.mobile)) {
					_this.$toast('手机号格式有误');
					return false;
				}
				_this.$http.post(_this.$host.have_phone, {
					mobile: _this.userData.mobile
				}).then(function(response) {
					if(response.data.status == "200") {
						_this.step = 2;
						//表示该手机号可以注册 获取验证码
						_this.$public.getCode(_this.userData.mobile, 1, _this);
					} else {
						_this.$toast(response.data.msg);
					}
				}).catch(function(error) {});

			},
			//点击下一步执行函数
			registerNext2() {
				/*
				 todo 1 前台判断验证码的格式是否正确
				      2 请求接口验证验证码是否正确
				 * */
				var _this = this;
				if(!_this.$public.code(_this.userData.code)) {
					_this.$toast('短信验证码格式有误');
					return false;
				}
				//验证短语验证码的正确性
				_this.$public.check_code({
					mobile: _this.userData.mobile,
					code: _this.userData.code,
					_this: _this,
					sfun: function(data) {
						if(data.data.status == '200') {
							_this.step = 3;
						} else {
							_this.$toast(data.data.msg);
						}
					}
				})
			},
			//点击注册执行函数
			submit() {
				//一系列else if判断 可以根据业务需要适当改变判断条件
				var _this = this;
				if(!_this.$public.pwd(_this.userData.pwd) || !_this.$public.pwd(_this.userData.opwd)) {
					_this.$toast('密码格式有误');
					return false;
				} else if(_this.userData.pwd != _this.userData.opwd) {
					_this.$toast('两次输入密码不一致');
					return false
				} else if(!_this.checked) {
					_this.$toast('请同意用户协议');
					return false;
				}
				//请求注册接口
				_this.$public.loading('注册中...',_this);  // loading
				_this.$http.post(_this.$host.register, _this.userData).then(function(response) {
					_this.$toast(response.data.msg);
					if(response.data.status == "200") {
						_this.$public.go('login', 500, _this);
					} else {
						_this.returnSetp1();

					}
				}).catch(function(error) {});

			},
			getCodeAgain() {
				var _this = this;
				_this.$public.getCode(_this.userData.mobile, 1, _this);

			}

		}

	}
</script>

<style>

</style>